<template>
  <el-select
    v-if="isPreferences"
    v-model="selectValue"
    size="small"
    @change="handleChangeValue"
  >
    <el-option
      v-for="item in languageList"
      :key="item.value"
      :label="$t(item.name)"
      :value="item.value"
    />
  </el-select>
  <el-popover
    v-else
    ref="languageSwitcherPopoverRef"
    trigger="click"
    :show-arrow="false"
    :popper-style="{
      padding: '4px',
      borderRadius: '4px',
      border: '1px solid var(--core-border-color-01)',
      width: 'auto',
      minWidth: '120px'
    }"
    :offset="4"
  >
    <template #reference>
      <div
        class="language-switcher-container display-flex flex-align flex-justify"
      >
        <core-svg name="language-switcher"></core-svg>
      </div>
    </template>

    <ul class="language-switcher-content">
      <li
        v-for="item in languageList"
        :key="item.value"
        @click="changeLanguage(item.value)"
        class="display-flex flex-align"
        :class="
          preferencesStore.general.lang.language === item.value && 'active'
        "
      >
        <span class="dot"></span>
        {{ $t(item.name) }}
      </li>
    </ul>
  </el-popover>
</template>

<script setup lang="ts">
import { usePreferencesStore } from '@/stores'
import type { Language } from '@/stores/modules/preferences/types'
import type { PopoverInstance } from 'element-plus'
import { computed, ref, useTemplateRef, watch } from 'vue'

withDefaults(defineProps<{ isPreferences?: boolean }>(), {
  isPreferences: false
})

const preferencesStore = usePreferencesStore()

const languageList = computed(() => {
  return preferencesStore.general.lang.languageList
})

const selectValue = ref(preferencesStore.general.lang.language)
const handleChangeValue = (val: Language) => {
  preferencesStore.setLanguage(val)
}

const languageSwitcherPopoverRef = useTemplateRef<PopoverInstance>(
  'languageSwitcherPopoverRef'
)

const changeLanguage = (val: Language) => {
  languageSwitcherPopoverRef.value?.hide()
  if (preferencesStore.general.lang.language === val) return
  preferencesStore.setLanguage(val)
}

watch(
  () => preferencesStore.general.lang.language,
  (newVal) => {
    selectValue.value = newVal
  }
)

defineOptions({
  name: 'CoreLanguageSwitcher'
})
</script>

<style scoped lang="scss">
.language-switcher-container {
  width: var(--core-header-tools-size);
  height: var(--core-header-tools-size);
  color: var(--core-text-color-05);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    color: var(--core-text-color-03);
    background-color: var(--core-bg-color-04);
  }
}

.language-switcher-content {
  li {
    padding: 6px 8px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--core-text-color-05);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    .dot {
      width: 6px;
      height: 6px;
      margin-right: 8px;
      border-radius: 50%;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover,
    &.active {
      color: var(--core-text-colors-04);
      background-color: var(--core-bg-color-04);
    }

    &.active .dot {
      background-color: var(--core-text-color-02);
    }
  }

  li:last-child {
    margin-bottom: 0;
  }
}
</style>
